<template>
	<view class="category">
		<searchBar/>
		<view class="content">
			<view class="left" >
					<view class="cate1" :class="{active : activeIndex == index}" @click="selectCate1(index)" v-for="(cate1,index) in categoryList" :key="index" >
						{{cate1.cat_name}}
					</view>
			</view>
			<view class="g-right">
					<image class="img" src="../../static/images/titleImage.png" mode="heightFix"></image>
					<view class="cate2" v-for="(cate2,index) in categoryList[activeIndex].children" :key="index">
						<view class="title">
							/
							<text>{{cate2.cat_name}}</text>
							/
						</view>
						<view class="cate3-wrapper">
							<view class="cate3" v-for="(cate3,index) in cate2.children" :key="index"
							@click="toSearchList(cate3.cat_name)">
								<image :src="cate3.cat_icon" mode=""></image>
								<text>{{cate3.cat_name}}</text>
							</view>
						</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import searchBar from '../../components/searchBar.vue'
	export default {
		components:{
			searchBar
		},
		data() {
			return {
				activeIndex:0,
				categoryList:[]
			}
		},
		onLoad() {
			this.getCategoryList()
		},
		methods: {
			// 分类列表
			async getCategoryList(){
				this.categoryList = await this.$request({
					url:'/api/public/v1/categories'
				})
			},
			// 选择类别
			selectCate1(index){
				this.activeIndex = index
			},
			toSearchList(key){
				uni.navigateTo({
					url:`../searchList/searchList?key=${key}`
				})
			}
		}
	}
</script>

<style lang="less">
.category{
	.content{
		display: flex;
		.left{
			width: 200rpx;
			position: fixed;
			top: 100rpx;
			left: 0;
			bottom: 0;
			overflow: scroll;
			background-color: #f4f4f4;
			.cate1{
				color: #333;
				font-size: 14px;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-bottom: 1px solid #eee;
				&.active{
					color: #eb4450;
					background-color: #fff;
					position: relative;
					&::before {
						content: '';
						position: absolute;
						width: 8rpx;
						height: 60rpx;
						background-color: #eb4450;
						left: 0;
						top: 20rpx;
					}
				}
			}
		}
		.g-right{
			position: fixed;
			top: 100rpx;
			left:200rpx;
			right: 0;
			bottom: 0;
			overflow: scroll;
			flex: 1;
			padding: 20rpx 16rpx;
			.img{
				height: 180rpx;
			}
			.cate2{
				.title{
					color: #e0e0e0;
					height: 110rpx;
					line-height: 110rpx;
					text-align: center;
					text{
						color: #333;
						margin: 0 30rpx;
					}
				}
				.cate3-wrapper{
					display: flex;
					flex-wrap: wrap;
					.cate3{
						width: 33.33%;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						flex-direction: column;
						>image{
							width: 120rpx;
							height: 120rpx;
						}
						>text{
							color: #333;
							font-size: 12px;
						}
					}
				}
			}
			}
	}
}
</style>
